<template>
  <div :style="getPageStyle">
    <template v-for="item in pageData.components">
      <component
        :key="item.id"
        v-if="!item.isHidden"
        :is="item.name"
        v-bind="item.props"
      />
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, computed } from "vue";
import { getWorksApi } from "@/api/common.api";
import { px2vw } from "@/utils/index.ts";
export default defineComponent({
  setup() {
    let pageData = ref<any>({});
    let init = async () => {
      let result: any = await getWorksApi();
      px2vw(result.components);
      pageData.value = result;
      document.title = result.title;
    };
    init();

    // 渲染主页面样式
    let getPageStyle = computed(() => {
      let styles = { ...pageData.value.props };
      styles["backgroundImage"] = `url(${styles["backgroundImage"]})`;
      return styles;
    });

    return {
      getPageStyle,
      pageData,
    };
  },
});
</script>

<style scoped></style>
